import React, { useState } from 'react'
import { Button, Form, Input, Modal } from 'antd'
import { PageContainer } from '@ant-design/pro-layout'

interface LocalPathFormProps {
  visible:boolean,
  handleOk:any,
  asyncProject:any,
  localPath:string
}

const FormItem = Form.Item

const formTailLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 15 }
}

const LocalPathForm: React.FC<LocalPathFormProps> = (props) => {

  const {visible,handleOk,asyncProject} = props
  const [form] = Form.useForm()
  const [proDetail,setProDetail] = useState({local_path:props.localPath})

  const submit = () => {
    form.validateFields().then(res => {
      handleOk(res);
    })
  }

  return(
    <Modal
      getContainer={false}
      width={600}
      keyboard={false}
      maskClosable={false}
      visible={visible}
      title="添加文件"
      onOk={submit}
      onCancel={() => asyncProject(false, '')}
      footer={[
        <Button key="back" onClick={() => asyncProject(false, '')}>关闭</Button>,
        <Button key="submit" type="primary" onClick={submit}>
          生成
        </Button>
      ]}
    >
      <Form form={form} initialValues={proDetail} onFinish={() => handleOk()}>
        <Form.Item {...formTailLayout} name="local_path" rules={[{ required: true, message: '请输入项目生成路径' }]}
                  label="生成路径">
          <Input placeholder="请输入项目生成路径"/>
        </Form.Item>
      </Form>

    </Modal>
  )
}

export default LocalPathForm;
